<template>
  <view
    class="ve-popup"
    v-if="visible"
    :style="{
      marginTop: offset + 'rpx',
      ...customStyle,
    }"
  >
    <!-- <view style="position: relative"> -->
    <!-- 蒙层 -->
    <view
      @tap.stop="maskClick"
      hover-stop-propagation
      @touchmove.stop.prevent="() => {}"
      class="ve-popup-mask"
      :class="{ 've-popup-mask-show': showBox }"
    >
    </view>

    <!-- 内容 -->
    <view class="ve-popup-content" :class="['content-' + mode, showBox ? 'content-visible' : '']" @touchmove.stop.prevent @tap.stop.prevent>
      <!-- teleport here -->
      <slot></slot>
    </view>
  </view>
  <!-- </view> -->
</template>

<script>
  export default {
    name: 've-popup',
    props: {
      modelValue: Boolean,
      customStyle: Object,
      mode: {
        type: String,
        default: 'center', // bottom center // top
      },
      maskClose: {
        type: Boolean,
        default: true,
      },
      offset: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        visible: false,
        showBox: false,
      }
    },
    watch: {
      modelValue(val) {
        if (val) {
          this.visible = val
          setTimeout(() => {
            this.showBox = val
          }, 0)
        } else {
          this.showBox = val
          setTimeout(() => {
            this.visible = val
          }, 250)
        }
      },
    },
    methods: {
      close() {
        this.$emit('close')
      },
      maskClick() {
        if (this.maskClose) {
          this.close()
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .ve-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1001;

    &-mask {
      width: 100%;
      height: 100%;
      opacity: 0;
      background-color: rgba(0, 0, 0, 0.6);
      transition: all 0.2s linear;

      &-show {
        opacity: 1;
      }
    }

    &-content {
      position: absolute;
      z-index: 1003;
      transition: all 0.2s linear;

      &.content-right {
        top: 0;
        left: 0;
        right: -100%;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        // 动画
        transform: translateX(100%);
        opacity: 0;
      }

      &.content-center {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        // 动画
        transform: scale(1.15);
        opacity: 0;
      }

      &.content-bottom {
        border-radius: 8px 8px 0px 0px;
        background-color: #ffffff;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translate3D(0px, 100%, 0px);
      }

      &.content-top {
        border-radius: 8px 8px 0px 0px;
        background-color: #ffffff;
        top: 0;
        left: 0;
        right: 0;
        transform: translate3D(0px, -100%, 0px);
      }

      &.content-visible {
        transform: none;
        opacity: 1;
      }
    }

    &-content {
      width: 100%;
    }
  }
</style>
